<template>
	<view>
		<view class="location" v-if="located" @click="selectNow">
			{{data.name}}
		</view>
		<view v-else>
			<view>{{tip}}</view>
		</view>
		<view>
			<view>
				热门城市
			</view> 
			<view >
				<u-grid border>
					<u-grid-item
						@click="selectOne(item)"
						   v-for="item,index in hotCity" :key="item.id"
					>
					   
						<text class="grid-text">{{item.name}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<u-index-list :index-list="indexList" >
			<template v-for="(item, index) in itemArr" >
				<u-index-item >
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<view class="list-cell"  v-for="(itm, idx) in item" :key="itm.id">
						<view  @click="selectOne(itm)">
							{{itm.name}}
						</view>
					</view>
				</u-index-item>
			</template>
		</u-index-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{
					id: '',
					name: '',
				},
				indexList: [],
				hotCity: [],
				itemArr: [],
				tip: '',
				located: false,
			};
		},
		onReachBottom() {
		
		},
		onLoad(e) {
			this.getCurrentLocation();
			this.getCommonData();
		},
		methods:{
			getCurrentLocation() {
				let that = this //在uniapp中药定义一下this才能使用
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log(res)
						// that.positionInfo.longitude = res.longitude;
						// that.positionInfo.latitude = res.latitude;
						// that.loAcquire(that.positionInfo.longitude,         that.positionInfo.latitude)
						that.loAcquire(res.longitude,res.latitude)
					},
					fail(err) {
						that.located = false;
						that.tip = "位置获取失败";
					}
				});
			},
			// 获取当前地址
			loAcquire(longitude, latitude) {
				let that = this;
				uni.showLoading({
					title: '位置获取中...',
					mask: true
				});
				let str = `output=JSON&key=VXWBZ-W4BC6-VWGSZ-MYLOI-7V5Y3-M6BPU&location=${latitude},${longitude}` //记得在这里要输入密钥哦！
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/?' + str,
					method: "GET",
					success(res) {
						uni.hideLoading();
						if(res.data.status == 0  &&res.data.result && res.data.result.address_component &&  res.data.result.address_component.city){
							that.getAddressInSystem(res.data.result.address_component.city)
						}else{
							this.tip = "位置解析失败,请手动选择";
							this.located =false;
						}
					},
					fail() {
						this.tip = "位置解析失败,请手动选择";
						this.located =false;
					}
					
				})
			},
			getAddressInSystem(city){
				var _this = this;
				uni.$u.http.get('/Region/getByName?name=' + city).then(async res =>{
					this.located = true;
					this.data.id = res.id
					this.data.name = res.name
				}).catch(err => {
					this.located = false;
					this.tip = "位置解析失败,请手动选择";
				})
			},
			selectNow(){
				this.selectOne(this.data);
			},
			selectOne(cell){
				uni.$emit("city",{region_id: cell.id,region_name: cell.name});
				uni.navigateBack();
			},
			getCommonData() {
				var _this = this;
				uni.$u.http.post('/Home/cityIndex').then(async res =>{
					this.indexList = res.indexList
					this.itemArr = res.itemArr
					this.hotCity = res.hotCity
				}).catch(err => {
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;
		}
</style>
